<!--
 * @Description: 系统消息管理 - 主页面
 * @Author: DHL
 * @Date: 2022-11-27 15:51:45
 * @LastEditors: DHL
 * @LastEditTime: 2022-11-28 20:50:01
-->
<template>
  <div class="tw-wrap">
    <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
      <!-- 按钮组 -->
      <template #btns>
        <el-button
          class="item"
          type="danger"
          :loading="loadingByDel"
          :disabled="isSelectRows"
          v-auth="`MESSAGE-DEL-LOGIC-BATCH`"
          @click="handleDelete()"
        >
          <svg-icon iconClass="delete"></svg-icon>
          批量删除
        </el-button>

        <el-button
          class="item"
          type="primary"
          v-auth="`MESSAGE-ADD`"
          @click="handleOpenForm('add')"
        >
          <svg-icon iconClass="plus"></svg-icon>
          新增
        </el-button>
      </template>

      <!-- 查询表单 -->
      <template #header>
        <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="项目">
                <el-input
                  v-model="searchForm.projectId"
                  clearable
                  placeholder="请输入项目"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="标题">
                <el-input v-model="searchForm.title" clearable placeholder="请输入标题"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="内容">
                <el-input
                  v-model="searchForm.content"
                  clearable
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="优先级">
                <el-select v-model="searchForm.priority" clearable placeholder="请选择优先级">
                  <tw-dic dicKey="MESSAGE_PRIORITY"></tw-dic>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="接收方类型 ">
                <el-select
                  v-model="searchForm.receivorType"
                  clearable
                  placeholder="请选择接收方类型 "
                >
                  <tw-dic dicKey="MESSAGE_RECEIVOR_TYPE"></tw-dic>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="消息类型">
                <el-input
                  v-model="searchForm.type"
                  clearable
                  placeholder="请输入消息类型"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="发送时间">
                <div class="flex-space-between">
                  <el-date-picker
                    v-model="searchForm.sendDateBegin"
                    type="datetime"
                    clearable
                    placeholder="请输入发送时间-开始"
                  ></el-date-picker>
                  <div class="split-line">-</div>
                  <el-date-picker
                    v-model="searchForm.sendDateEnd"
                    type="datetime"
                    clearable
                    placeholder="请输入发送时间-结束"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="发送人">
                <el-input
                  v-model="searchForm.sender"
                  clearable
                  placeholder="请输入发送人"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="状态">
                <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
                  <tw-dic dicKey="MESSAGE_READ_STATUS"></tw-dic>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="撤销时间">
                <div class="flex-space-between">
                  <el-date-picker
                    v-model="searchForm.revokeDateBegin"
                    type="datetime"
                    clearable
                    placeholder="请输入撤销时间-开始"
                  ></el-date-picker>
                  <div class="split-line">-</div>
                  <el-date-picker
                    v-model="searchForm.revokeDateEnd"
                    type="datetime"
                    clearable
                    placeholder="请输入撤销时间-结束"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="撤销人">
                <el-input
                  v-model="searchForm.revoker"
                  clearable
                  placeholder="请输入撤销人"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="撤销原因">
                <el-input
                  v-model="searchForm.revokeReason"
                  clearable
                  placeholder="请输入撤销原因"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <!-- 数据表格 -->
      <tw-table
        ref="tableRef"
        :loading="loading"
        :options="tableOptions"
        :events="tableEvents"
        :data="tableData"
        @search="searchList"
        exportExcelAuthKey="MESSAGE-EXPORTEXCEL"
        @exportExcel="handleExport"
      >
        <template #action="{ row }">
          <el-button
            link
            type="primary"
            v-if="['0', '2'].includes(row.status)"
            @click="handleRelease(row)"
          >
            发布
          </el-button>

          <el-button link type="warning" v-if="row.status === '1'" @click="handleCancel(row)">
            撤销
          </el-button>

          <el-button
            link
            type="warning"
            v-auth="`MESSAGE-EDIT`"
            @click="handleOpenForm('edit', row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            v-auth="`MESSAGE-DEL-LOGIC-BATCH`"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </tw-table>
    </tw-layout>
    <messageForm ref="formRef" @refreshTableData="handleRefresh"></messageForm>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss"></style>
